<template>
  <div class="demo-select-size">
    <div class="explainText">
      <p>
        选择器分为：小，中，大，三种尺寸。高度分别为：24px/28px/32px.推荐及默认尺寸为[大]。宽度的最小、最大尺寸分别为：200px/440px。

      </p>
      <p>可在不同场景及不同业务需求选择适合尺寸</p>
    </div>
    <div class="column-divider">
      <div class="demo-button-line">
        <div class="d-title">小</div>
        <e-select style="width: 200px;margin-right:50px" size="small">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled"
          >{{ item.label }}</e-option
          >
        </e-select>
        <e-select style="width: 440px" size="small">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled"
          >{{ item.label }}</e-option
          >
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title">中</div>
        <e-select size="middle" style="width: 200px;margin-right:50px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled"
          >{{ item.label }}</e-option
          >
        </e-select>
        <e-select size="middle" style="width: 440px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled"
          >{{ item.label }}</e-option
          >
        </e-select>
      </div>
      <div class="demo-button-line">
        <div class="d-title">大</div>
        <e-select size="large" style="width: 200px;margin-right:50px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled"
          >{{ item.label }}</e-option
          >
        </e-select>
        <e-select size="large" style="width: 440px">
          <e-option
            v-for="item in cityList"
            :value="item.value"
            :key="item.value"
            :disabled="item.disabled"
          >{{ item.label }}</e-option
          >
        </e-select>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'DemoSelectStyle',
  data() {
    return {
      cityList: [
        {
          value: 'New York',
          label: 'New York',
        },
        {
          value: 'London',
          label: 'London',
        },
        {
          value: 'Sydney',
          label: 'Sydney',
        },
        {
          value: 'Ottawa',
          label: 'Ottawa',
        },
        {
          value: 'Paris',
          label: 'Paris',
        },
        {
          value: 'Canberra',
          label: 'Canberra',
        },
      ],
    }
  },
}
</script>
<style>
.demo-select-size .demo-button-line .d-title {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  display: inline-block;
  width: 4rem;
  margin-bottom: 20px;
}
.column-divider{
  display:flex;
  flex-direction: column;
}
</style>
